<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5x5 Grid Canvas</title>
<style>
    canvas {
        border: 1px solid #ccc; /* 给canvas添加边框 */
    }
</style>
</head>
<body>
<canvas id="gridCanvas" width="200" height="200"></canvas>
<script>
    var canvas = document.getElementById('gridCanvas');
    var ctx = canvas.getContext('2d');

    var size = 200; // Canvas的尺寸
    var cellSize = size / 5; // 每个单元格的尺寸

    ctx.beginPath();
    ctx.lineWidth = 1; // 设置线条的宽度，可以尝试更细的线如0.1或0.5看哪个效果更好

    // 绘制水平线
    for (var i = 0; i <= 5; i++) {
        var pos = i * cellSize + 0.5; // 加0.5以获得更清晰的线条
        ctx.moveTo(0, pos);
        ctx.lineTo(size, pos);
    }

    // 绘制垂直线
    for (var j = 0; j <= 5; j++) {
        var pos = j * cellSize + 0.5;
        ctx.moveTo(pos, 0);
        ctx.lineTo(pos, size);
    }

    ctx.strokeStyle = '#000'; // 设置线条颜色
    ctx.stroke(); // 绘制定义的路径
</script>
</body>
</html>
